import { CoursewaresListView } from '@/components/CoursewaresList';
import Source from '@/components/SourceSelect/Entity/Source';
import { tradeGroupResult } from '@/components/Trade/utils';
import { Card, Descriptions } from 'antd';
import { useEffect, useState } from 'react';

export interface PackageDetailPorps {
  guid?: string;
  name?: string;
  createTime?: string;
  resourceType?: string;
  coursewareList?: Source[];
  /**
   * @desc 上架信息
   */
  // shelfInfo?: {
  //   area?: string;
  //   org?: string;
  //   trade?: string;
  //   tradeGroup?: tradeGroupResult[];
  // };
  shelfInfo?: {
    area?: string;
    org?: string;
    trade?: string;
    showTrade?: tradeGroupResult[];
  };
}

export function PackageDetail({ coursewareList, name, createTime, resourceType, shelfInfo, guid }: PackageDetailPorps) {
  const [list, setList] = useState(coursewareList ?? []);
  useEffect(() => {
    if (!coursewareList?.length && guid) {
      if (process.env.processEnvDetail.REACT_APP_PLATFORM === 'boss') {
        Source.listWithRelationType('package', guid).then((data) => {
          console.log(data);
          setList(data);
        });
      } else {
        // Source.xihuiEntPackageDetail(guid).then((data) => {
        //   setList(data);
        // });

        Source.govAssemblePackageDetail(guid).then((data) => {
          setList(data);
        });
      }
    }
  }, [coursewareList, guid]);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <Card title="课件包基本信息">
        <Descriptions>
          <Descriptions.Item label="课件包名称">{name}</Descriptions.Item>
          <Descriptions.Item label="创建时间">{createTime}</Descriptions.Item>
        </Descriptions>
      </Card>
      {shelfInfo ? (
        <Card title="上架信息">
          <Descriptions column={1}>
            <Descriptions.Item label="地域">{shelfInfo.area || '--'}</Descriptions.Item>
            <Descriptions.Item label="组织类型">{shelfInfo.org || '--'}</Descriptions.Item>
            {/* <Descriptions.Item label="行业">
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                {shelfInfo?.tradeGroup &&
                  shelfInfo?.tradeGroup.map((t) => {
                    return (
                      <div key={t.entTypeCode} style={{ marginBottom: '6px' }}>
                        {t.name}——{t.tradeDictString};
                      </div>
                    );
                  })}
              </div>
            </Descriptions.Item> */}
            <Descriptions.Item label="行业">
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                {shelfInfo?.showTrade &&
                  shelfInfo?.showTrade.map((t) => {
                    return (
                      <div key={t.entTypeCode} style={{ marginBottom: '6px' }}>
                        {t.name}——{t.tradeDictString};
                      </div>
                    );
                  })}
                {!shelfInfo?.showTrade || !shelfInfo?.showTrade.length ? '--' : ''}
              </div>
            </Descriptions.Item>
          </Descriptions>
        </Card>
      ) : null}
      <Card title="课件包内容">
        <CoursewaresListView value={list} resourceType={resourceType}></CoursewaresListView>
      </Card>
    </div>
  );
}
